<template>
  <div>
    <a-button class="plusButton" type="primary" icon="plus" @click="Add">新增</a-button>
    <div class="container">
      <ant-card
        class="Card"
        :title="$language(item.title)"
        v-for="(item,index) in moduleList"
        :key="index"
      >
        <template #content>
          <div>
            <icon-font :type="item.icon" class="Icon"></icon-font>
          </div>
        </template>
        <template #actions>
          <a @click="theEdit(item)">
            <a-icon type="edit" />&nbsp;&nbsp;编辑
          </a>
          <a @click="MenuSetting">
            <a-icon type="setting" />&nbsp;&nbsp;菜单管理
          </a>
        </template>
      </ant-card>
    </div>
    <open-drawer
      v-if="visible"
      :visible="visible"
      :title="title"
      @onClose="onClose"
      @Submit="Submit"
      :edit="edit"
    />
  </div>
</template>
<script lang="ts">
const AntCard = () => import("~/components/Card.vue").then(m => m.default || m);
const OpenDrawer = () => import("./OpenDrawer.vue").then(m => m.default || m);
import { getMyBusiness } from "~/logicLib/myBusiness";
import { Component, Vue } from "vue-property-decorator";
@Component({
  layout: "menu",
  components: {
    AntCard,
    OpenDrawer,
  },
  asyncData(context) {
    return getMyBusiness(context, "").then((value: any) => {
      if (value.status === 0) {
        return {
          moduleList: value.data
        };
      }
    });
  }
})
export default class MenuIndex extends Vue {
  moduleList: any[] = [];
  visible: boolean = false;
  title: string = "新增";
  edit: object = {};
  Add() {
    this.title = "新增";
    this.visible = true;
  }
  onClose() {
    this.visible = false;
  }
  Submit() {
    this.visible = false;
    const _this: any = this;
    if (this.title === "新增") {
      _this.$message.success("新增成功");
    } else {
      _this.$message.success("修改成功");
    }
  }
  theEdit(item: any) {
    this.visible = true;
    this.title = "编辑";
    this.edit = item;
  }
  MenuSetting() {
    this.$router.push({
      name: "Sysmenu"
    });
  }
}
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  .Card {
    width: 280px;
    margin-left: 15px;
    margin-top: 15px;
    .Icon {
      font-size: 30px;
    }
  }
}
.plusButton {
  margin-left: 15px;
}
</style>